<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Keyframes test with keyframes out of order</title>
  <style type="text/css" media="screen">
    #box {
        position: absolute;
        left: 0;
        top: 100px;
        height: 100px;
        width: 100px;
        background-color: blue;
        animation-duration: 10s;
        animation-timing-function: linear;
        animation-name: anim;
    }
    @keyframes anim {
        40%  { left: 100px; }
        from { left: 50px; }
        20%  { left: 100px; }
        to   { left: 300px; }
        80%  { left: 200px; }
        60%  { left: 200px; }
    }
    </style>
    <script src="resources/animation-test-helpers.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript" charset="utf-8">

    const expectedValues = [
      // [time, element-id, property, expected-value, tolerance]
      [3, "box", "left", 100, 0],
      [7, "box", "left", 200, 0],
    ];

    runAnimationTest(expectedValues);

  </script>
</head>
<body>
This test performs an animation of the left property. It should stop for 2s at 100px and 200px
We test for those values 1s after it has stopped at each position. The keyframes are out of order
and should get correctly sorted.
<div id="box">
</div>
<div id="result">
</div>
</body>
</html>
